<template>
	<div class="box" style="padding: 10px;">
		<!-- 题目 -->
		<div style="width: 100%;height: 90vh;overflow-y: scroll;">
			<div class="topic topic_if">
				<!-- hander -->
				<div class="hander">
					<div class="type">{{topic_Obj.topicType || '---'}}题</div>
					<div class="number">{{index_curr + 1}}/{{topic_list.length}}</div>
				</div>

				<!-- 题目内容 -->
				<div class="topic_content">
					<p>{{topic_Obj.topic}}</p>
				</div>
				
				<!-- 选项列表 -- 问答 -->
				<div class="select_list" v-if="topic_Obj.topicType == '问答'" >
					<textarea 
						class="wenda" 
						placeholder="请输入您的答案" 
						v-model="current_select" 
						v-if="!isSubmit" 
					/>
					<textarea 
						class="wenda" 
						placeholder="请输入您的答案" 
						:disabled="isSubmit"  
						v-model="topic_Obj.current_select" 
						v-else 
					/>
				</div>
				
				
				<div class="select_list" v-else>
					<div 
						v-for="(item,index) in topic_Obj.options" 
						:key="index" 
						@click="select_topic(item)"
						:style="{background:verify(item.value , current_select)}"
					>
						{{item.value}}. {{item.label}}
					</div>
				</div>
				
			</div>

			<!-- 回答问题校验 -->
			<div class="if topic_if" v-if="isSubmit">
				<p class="result" :style="{color:`${topic_Obj.result ? '#1BA035' : 'red'}`}">
					{{topic_Obj.result ? '回答正确' : '回答错误'}}
				</p>
				<div class="answer">
					<p >正确答案：{{topic_Obj.answer}}</p>
					<p >您得答案：{{topic_Obj.current_select || '空'}}</p>
				</div>
				<div class="difficulty"> 
					<p>试题难度：{{topic_Obj.difficulty}}</p>
					<p style="margin-top: 15px;">答案解释：{{topic_Obj.explain || '无'}}</p>
				</div>
			</div>
		</div>

		<div class="btn">
			<img 
				src="https://mp-7f09bcd1-475b-4778-8767-52ae180f55ab.cdn.bspapp.com/账单Icon/答题卡.svg" 
				alt="" 
				@click="showCard"
			/>
			<button class="submit" @click="submit" >交卷</button>
			<button @click="last">上一题</button>
			<button @click="next">下一题</button>
		</div>
		
		
		<!-- 答题卡 -->
		<van-popup :show="isShowCard" round position="bottom"  @close='isShowCard = false' closeable>
				<div style="height: 70vh;width: 100%;">
					<div class="card_popup">
						<div 
							v-for="(item,index) in topic_list" 
							:key="index" 
							class="card_item"
							:style="{background:verifyCard(item)}"
							@click="goToTopic(item,index)"
							:class="index_curr == index ? 'response_active' : ''"
						>
							{{index + 1}}
						</div>
					</div>
				</div>
		</van-popup>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				topic_list: [], // 题目列表
				topic_Obj: {}, //题目对象
				// 当前题目
				index_curr: 0,
				current_select:'',
				isSubmit:false,
				isShowCard:false,
				topicClass:"",
				userInfo:{}
			}
		},

		onLoad(option) {
			if(option._id){
				this.getHistoryData(option._id)
			}else{
				this.topicClass = option.topicClass
				this.getInit(option.topicClass)
			}
			this.userInfo = uni.getStorageSync('userInfo')
		},
		
		methods: {
			// 获取题目
			async getInit(topicClass) {
				let result = await this.$axios('topic_random_query', {
					topicClass: topicClass
				}, true)
				
				if (result.code == 200) {
					// 默认显示第一条
					this.topic_list = result.data || []
					this.topic_Obj = result.data[this.index_curr] || {}
					this.setCurrent_select_type()
				}
			},
			
			// 获取答题卡历史
			async getHistoryData(_id){
				let result = await this.$axios('overallSituation', {
					databaseName: 'testPaperList',
					state: 'look',
					_id:_id
				}, false)
				 
				if(result.code == 200){
					this.topic_list = result.data[0].testPaperList
					this.isSubmit = true
					this.topic_Obj = this.topic_list[this.index_curr]
					this.setCurrent_select_type()
				}else {
					uni.showToast({
						title:"操作失败",
						icon:"none",
						duration:2000
					})
				}
			},
			
			// 根据当前题目 判断当前答案容器应该是什么类型
			setCurrent_select_type(){
				if(this.topic_Obj.topicType == '多选'){
					this.current_select = []
				}else {
					this.current_select = ""
				}
			},
			
			// 校验数组是否相等
			arraysEqual(arr1, arr2) {
			    if (arr1.length !== arr2.length) return false;
			    const sortedArr1 = [...arr1].sort();
			    const sortedArr2 = [...arr2].sort();
			    for (let i = 0; i < sortedArr1.length; i++) {
			      if (sortedArr1[i] !== sortedArr2[i]) return false;
			    }
			    return true;
			},
			
			// 点击选择题目
			select_topic(item){
				if(this.isSubmit){
					uni.showToast({
						title:"试卷已提交,不可修改",
						icon:"none",
						duration:2000
					})
					return
				}
				// 判断当前题目类型
				if(this.topic_Obj.topicType == '多选'){
					// 判断当前选项是否已经存在\
					let indexOf = this.current_select.indexOf(item.value)
					if(indexOf != -1){
						// 删除当前选项
						this.current_select.splice(indexOf , 1)
					}else {
						this.current_select.push(item.value)
					}
				}else {
					this.current_select = item.value
				}
			},
			
			// 校验题目
			verify(answer , myAnswer){
				// 判断当前试卷是否已经提交
				if(this.isSubmit){  
					if(Array.isArray(this.topic_Obj.answer)){
						if(this.topic_Obj.answer.includes(answer)){
							return '#c5e1a5'
						}
						
						// 判断已选得答案 是否正确 不正确显示 红色
						if(!this.topic_Obj.current_select){
							this.topic_Obj.current_select = []
						}
						let color = ''
						this.topic_Obj.current_select.forEach(item=>{
							if(!this.topic_Obj.answer.includes(item) && answer == item){
								color = '#e57373'
							}
						})
						
						return color
						
					}else {
						// 正确答案显示绿色
						if(answer == this.topic_Obj.answer){
							return '#c5e1a5' 
						}
						
						if((this.topic_Obj.current_select != this.topic_Obj.answer) && (this.topic_Obj.current_select == answer)){
							// 错误答案显示红色
							return '#e57373'
						}
					}
				}else {
					// 判断答案类型 当前答案显示绿色
					if(Array.isArray(myAnswer)){
						if(myAnswer.includes(answer)){
							return '#c5e1a5'
						}
					}else {
						if(answer == myAnswer){
							return '#c5e1a5'
						}
					}
				}
			},
			
			// 校验答题卡答题状态 以及答题卡 答案状态
			verifyCard(item){
				if(this.isSubmit){
					// 判断当前答案是不是数据
					if(item.result){
						return "#a5d6a7"
					}else {
						return "#e57373"
					}
				}else {
					// 判断当前答案是不是数组
					if(Array.isArray(item.current_select)){
						if(item.current_select.length == 0){
							return '#cfd8dc'
						}else {
							return "#a5d6a7"
						}
					}else {
						if(item.current_select){
							return "#a5d6a7"
						}else {
							return '#cfd8dc'
						}
					}
				}
			},
			
			// 点击答题卡
			goToTopic(item,index){
				this.next(false)
				this.index_curr = index
				this.topic_Obj = item
				this.setCurrent_select_type()
				if(item.current_select){
					this.current_select = item.current_select	
				}
				this.isShowCard = false
			},
			
			// 问答题判断
			countCommonCharacters(str1, str2) {
			  // 将字符串转换为集合以获取唯一字符
			  const set1 = new Set(str1);
			  const set2 = new Set(str2);
			
			  // 计算两个集合的交集
			  let commonCount = 0;
			  set1.forEach(char => {
			    if (set2.has(char)) {
			      commonCount++;
			    }
			  });
			  // 如果答案的长度除以5 小于 匹配到的字符长度 , 就说明这道题对的差不多了
			  if((str1.length / 6) < commonCount){
				  return  true
			  }else { 
				  return false
			  }
			},
			
			// 点击上一题
			last(){
				if(this.index_curr != 0){
					this.next(false) //保存当前答案并且校验 
					this.index_curr--
					this.topic_Obj = this.topic_list[this.index_curr]
					if(this.topic_Obj.current_select){
						this.current_select = this.topic_Obj.current_select
					}else {
						this.setCurrent_select_type()
					}
				} 
			},
			
			// 点击下一题
			next(isNext = true){
				let result = false;
				if(!this.isSubmit){
					// 校验当前选择得答案 是否正确
					if(Array.isArray(this.current_select) && this.current_select.length != 0){
						result = this.arraysEqual(this.topic_Obj.answer , this.current_select)
					}else if(this.topic_Obj.topicType == '问答'){
						result = this.countCommonCharacters(this.topic_Obj.answer , this.current_select)
					}else {
						result = this.topic_Obj.answer == this.current_select
					}
					
					// 更改答题卡数据
					// this.topic_list[this.index_curr].result = result //结果
					// this.topic_list[this.index_curr].current_select = this.current_select //选择答案
					this.$set(this.topic_list[this.index_curr] , 'result' , result)
					this.$set(this.topic_list[this.index_curr] , 'current_select' , this.current_select)
				}
				
				if(isNext){
					// 进入下一题
					if(this.index_curr < this.topic_list.length - 1){
						this.index_curr++
						this.topic_Obj = this.topic_list[this.index_curr]
						if(this.topic_Obj.current_select){
							this.current_select = this.topic_Obj.current_select
						}else {
							this.setCurrent_select_type()	
						}
					}
				}
				
			},
			
			// 点击答题卡
			showCard(){
				// 显示答题卡弹出框
				this.isShowCard = true
			},
			
			// 校验答题分数
			getGrade(){
				let count = 0
				this.topic_list.forEach(item => {
					if(item.result){
						count++
					}
				})
				return count
			},
			
			// 点击交卷
			submit(){
				if(this.isSubmit) {
					uni.showToast({
						title:"试卷已提交",
						icon:"none",
						duration:2000
					})
					return
				}
				uni.showModal({
					cancelText:"取消",
					confirmText:'确定', 
					title:"确定提交试卷吗?",
					success:async (res)=>{
						if(res.confirm){
							this.next(false)
							let result = await this.$axios('overallSituation', {
								databaseName: 'testPaperList',
								state: 'add',
								testPaperList:this.topic_list ,//试卷
								createTime:this.$getTime(),
								grade:this.getGrade(),
								topicClass:this.topicClass,
								userName:this.userInfo.userName
							}, true)
							
							if(result.code == 200){
								this.isSubmit = true
								uni.showToast({
									title:"试卷已提交",
									icon:'none',
									duration:2000
								})
							}
						}
					}
				})
			}
		}
	}
</script>

<style scoped>
	.topic_if {
		border-radius: 10px;
		padding: 10px;
		box-sizing: border-box;
		background: #fff;
	}

	.topic {
		width: 100%;
	}

	.if {
		margin-top: 10px;
		width: 100%;
	}

	.hander {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.hander .type {
		padding: 5px 10px;
		font-size: 12px;
		border-top-right-radius: 15px;
		border-bottom-right-radius: 15px;
		background: #2B8DFF;
		color: #fff;
		margin-left: -10px;
	}

	.hander .number {
		font-size: 12px;
		color: #666;
	}

	.topic_content {
		margin-top: 10px;
		font-size: 14px;
		color: #333;
		line-height: 18px;
		font-weight: 700;
	}

	.select_list {
		width: 100%;
		margin-top: 15px;
		overflow-y: scroll;
	}

	.select_list div {
		width: 100%;
		padding: 10px;
		box-sizing: border-box;
		background: #f1f1f1;
		margin-bottom: 5px;
		border-radius: 5px;
		font-size: 14px;
	}

	.if .result {
		font-size: 12px;
		margin-bottom: 10px;
	}

	.if .answer {
		color: #333;
		font-size: 12px;
	}
	
	.if .answer p {
		margin-top: 15px;
	}

	.if .difficulty {
		font-size: 12px;
		color: #333;
		margin-top: 10px;
	}

	.btn {
		width: 100%;
		height: 8vh;
		margin-top: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.btn image {
		width: 30px;
		height: 30px;
		margin-right: 10px;
	}

	.btn button {
		width: 28%;
		height: 35px;
		border-radius: 5px;
		background: #1BA035;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 12px;
		font-weight: 700;
	}
	
	.btn .submit {
		background: #fff;
		color: #333;
	}
	
	.wenda {
		width: 100%;
		height: 200px;
		border: 1px solid #f1f1f1;
		display: flex;
		font-size: 14px;
		padding: 10px;
		box-sizing: border-box;
		line-height: 20px;
	}
	
	.card_popup {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 50px 10px 10px;
		box-sizing: border-box;
	}
	
	.card_popup .card_item {
		width: 15%;
		aspect-ratio: 1 / 1;
		background: #cfd8dc;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 10px;
		border-radius: 5px;
		font-weight: 500;
		font-size: 14px;
	}
	
	.response_active {
		background-color: #81d4fa !important;
	}
</style>